<template>
	<div style="width: 200px;heigh:calc(100%-100px);border-right: 1px solid rgb(220, 227, 232);background-color:#F4F6F8;">
			<div class="wkf-drag-item" v-for="(colItem,index) in componentItems" :key="index" :type="colItem.type">
				<img :src="colItem.image" style="width:24px;height:24px;"/>
				<div style="margin-left:5px;margin-right:5px;">{{colItem.label}}</div>
				<i class="el-icon-circle-plus-outline yun-plus-icon" @click="onIconClickHandler(colItem)"></i>
			</div>
	</div>
</template>

<script>
	import image1 from "@/assets/1.png";
	import image2 from "@/assets/2.png";
	import image3 from "@/assets/3.png";
	import image4 from "@/assets/4.png";
	import image5 from "@/assets/5.png";
	import image6 from "@/assets/6.png";
	import image7 from "@/assets/7.png";
	export default {
		name: "Palette",
		data() {
			return {
				componentItems: [{
						"label": "开始节点",
						"type": "start",
						"icon": "el-icon-folder-remove",
						"image":image1
					},
					{
						"label": "任务节点",
						"type": "task",
						"icon": "el-icon-folder-remove",
						"image":image2
					},
					{
						"label": "服务节点",
						"type": "service",
						"icon": "el-icon-folder-remove",
						"image":image3
					},
					{
						"label": "决策节点",
						"type": "decision",
						"icon": "el-icon-folder-remove",
						"image":image4
					},
					{
						"label": "分支节点",
						"type": "fork",
						"icon": "el-icon-folder-remove",
						"image":image5
					},
					{
						"label": "合并节点",
						"type": "join",
						"icon": "el-icon-folder-remove",
						"image":image6
					},
					{
						"label": "结束节点",
						"type": "end",
						"icon": "el-icon-folder-remove",
						"image":image7
					}
				]
			}
		},
		methods: {
			onIconClickHandler(item) {
				this.$emit("addComponent",item.type);
			}
		},
	}
</script>

<style>
	.wkf-drag-item {
		color: #565758;
		width: 150px;
		border: 1px dashed #E0E3E7;
		margin: 5px 0 5px 0;
		padding: 5px;
		border-radius: 5px;
		padding-left: 8px;
		font-size: 14px;
		display: flex;
		align-items: center;
	}
	
	.wkf-drag-item:hover{
		cursor: pointer;
		border: 1px dashed gray;
	}
</style>
